<route>
{
    meta: {
        layout: 'index',
        title:'首页'
    }
}  
</route>
<template>
  <view>
    <a-row :gutter="24">
      <a-col :span="24" :lg="12" :xl="6" class="mb-24">
        <CountCard :title="123" :value="456">
          
        </CountCard>
      </a-col>
      <a-col :span="24" :lg="12" :xl="6" class="mb-24">
        <CountCard></CountCard>
      </a-col>
    </a-row>

    <ProfileHead></ProfileHead>
    <profileProject></profileProject>

    <a-row :gutter="24" type="flex" align="stretch">
      <a-col :span="24" :lg="10" class="mb-24">
        <!-- bug -->
        <!-- <ActiveUsers></ActiveUsers> -->
      </a-col>
      <a-col :span="24" :lg="14" class="mb-24">
        <SalesOverview></SalesOverview>
      </a-col>
    </a-row>

    <a-row :gutter="24" type="flex" align="stretch">
      <a-col :span="24" :lg="16" class="mb-24">
        <!-- bug -->
        <ProjectCard :data="tableData" :columns="tableColumns"></ProjectCard>
      </a-col>
      <a-col :span="24" :lg="8" class="mb-24">
        <Timeline></Timeline>
      </a-col>
    </a-row>

    <a-row :gutter="24" type="flex" align="stretch">
			<a-col :span="24" :xl="14" class="mb-24">
				<CardInfo></CardInfo>
			</a-col>
			<a-col :span="24" :xl="10" class="mb-24">
				<LittleCard></LittleCard>
			</a-col>
		</a-row>

  </view>
</template>
<script setup>
import {
  PieChartOutlined
} from '@ant-design/icons-vue';
const title = ref(null);

//ProjectCard组件
const tableColumns = [
  {
    title: 'COMPANIES',
    dataIndex: 'company',
    scopedSlots: { customRender: 'company' },
    width: 300,
  },
  {
    title: 'MEMBERS',
    dataIndex: 'members',
    scopedSlots: { customRender: 'members' },
  },
  {
    title: 'BUDGET',
    dataIndex: 'budget',
    class: 'font-bold text-muted text-sm',
  },
  {
    title: 'COMPLETION',
    scopedSlots: { customRender: 'completion' },
    dataIndex: 'completion',
  },
];
const tableData = [
  {
    key: '1',
    company: {
      name: 'Soft UI Shopify Version',
      logo: 'images/logos/logo-shopify.svg',
    },
    members: ["images/face-1.jpg", "images/face-4.jpg", "images/face-2.jpg", "images/face-3.jpg",],
    budget: '$14,000',
    completion: 60,
  },
  {
    key: '2',
    company: {
      name: 'Progress Track',
      logo: 'images/logos/logo-atlassian.svg',
    },
    members: ["images/face-4.jpg", "images/face-3.jpg",],
    budget: '$3,000',
    completion: 10,
  },
  {
    key: '3',
    company: {
      name: 'Fix Platform Errors',
      logo: 'images/logos/logo-slack.svg',
    },
    members: ["images/face-1.jpg", "images/face-2.jpg", "images/face-3.jpg",],
    budget: 'Not Set',
    completion: {
      label: '100',
      status: 'success',
      value: 100,
    },
  },
  {
    key: '4',
    company: {
      name: 'Launch new Mobile App',
      logo: 'images/logos/logo-spotify.svg',
    },
    members: ["images/face-1.jpg", "images/face-2.jpg",],
    budget: '$20,600',
    completion: {
      label: '100',
      status: 'success',
      value: 100,
    },
  },
  {
    key: '5',
    company: {
      name: 'Add the New Landing Page',
      logo: 'images/logos/logo-jira.svg',
    },
    members: ["images/face-1.jpg", "images/face-4.jpg", "images/face-2.jpg", "images/face-3.jpg",],
    budget: '$4,000',
    completion: 80,
  },
  {
    key: '6',
    company: {
      name: 'Redesign Online Store',
      logo: 'images/logos/logo-invision.svg',
    },
    members: ["images/face-1.jpg", "images/face-4.jpg", "images/face-3.jpg",],
    budget: '$2,000',
    completion: {
      label: 'Cancelled',
      status: 'exception',
      value: 100,
    },
  },
];
</script>

